<template>
  <div class="star" :class="`star-${size}`">
    <span  class="star-item" v-for="(sc, index) in starClasses" :key="index" :class="sc" ></span>
  </div>
</template>
<script>
// 类名常量
const CLASS_ON = 'on' 
const CLASS_HALF = 'half' 
const CLASS_OFF = 'off'
export default {
    props:{
        score:Number,
        size:Number 
    },
    computed: { 
        starClasses () { 
            const scs = [] 
            const {score} = this 
            const scoreInteger = Math.floor(score) 
            // 添加类名 CLASS_ON 
            for (let i = 0; i< scoreInteger; i++) { 
                scs.push(CLASS_ON) 
            }
            // 添加类名 CLASS_HALF
            if(score*10-scoreInteger*10>=5) { 
                scs.push(CLASS_HALF) 
            }
            // 添加类名 CLASS_OFF 
            while(scs.length<5) { 
                scs.push(CLASS_OFF) 
            }
            return scs 
        }
    }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../assets/stylus/mixin.styl"
    .star
        display flex
        .star-item 
            display inline-block 
            background-repeat no-repeat
    &.star-48     
        .star-item 
            width 1.2rem 
            height 1.2rem 
            margin-right 1.3rem 
            background-size 1.2rem 1.2rem 
            &:last-child 
                margin-right: 0 
            &.on
                bg-image('../assets/images/star48_on') 
            &.half 
                bg-image('../assets/images/star48_half') 
            &.off 
                bg-image('../assets/images/star48_off')         
     &.star-36     
            .star-item 
                width 0.8rem 
                height 0.8rem 
                margin-right 0.35rem 
                background-size 0.8rem 0.8rem 
                &:last-child 
                    margin-right: 0 
                &.on
                    bg-image('../assets/images/star36_on') 
                &.half 
                    bg-image('../assets/images/star36_half') 
                &.off 
                    bg-image('../assets/images/star36_off')        
     &.star-24     
            .star-item 
                width 0.55rem 
                height 0.55rem 
                margin-right 0.2rem 
                background-size 0.55rem 0.55rem 
                &:last-child 
                    margin-right: 0 
                &.on
                    bg-image('../assets/images/star24_on') 
                &.half 
                    bg-image('../assets/images/star24_half') 
                &.off 
                    bg-image('../assets/images/star24_off')       
              
   
</style>

